<template>
	<view class="news">
		<search></search>
		<view class="news_content">
			<view class="left">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="left-item" :class="{active:item.cat_id === activeID}" v-for="(item,index) in leftList"
						:key='item.cat_id' @click="showRrght(item.cat_id)">{{item.cat_name}}</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="right_item" v-for="(item,index) in rightList" :key='item.cat_id'>
						<text class="table">{{item.cat_name}}</text>
						<view class="item">
							<view v-for="(v,i) in item.children" :key='v.cat_id' :data-id="v.cat_id" @click="goToGoodsDetails($event,v.cat_id)">
								<image :src="v.cat_icon" mode="widthFix"></image>
								<text>{{v.cat_name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/index.vue'
	export default {
		data() {
			return {
				leftList: [],
				rightList: [],
				activeID: 1
			}
		},
		components: {
			search
		},
		onLoad() {
			this.getCategories()
		},
		methods: {
			async getCategories() {
				let res = await this.$store.dispatch('getCategories')
				let list = res.data.message
				this.leftList = list
				this.rightList = list[0].children
			},
			showRrght(id) {
				this.activeID = id
				this.leftList.forEach((item, index) => {
					if (item.cat_id === id) {
						this.rightList = this.leftList[index].children
					}
				})
			},
			goToGoodsDetails(e,id){
				//  #ifdef MP-WEIXIN
				uni.navigateTo({
					url:`../goodsList/goodsList?id=${e.currentTarget.dataset.id}`
				})
				// #endif
				//  #ifdef H5
				uni.navigateTo({
					url:`../goodsList/goodsList?id=${id}`
				})
				// #endif
			}
		}
	}
</script>

<style scoped>
	.news_content {
		display: flex;
		padding-top: 50rpx;
		/* #ifdef MP-WEIXIN */
			height: calc(100vh - 170rpx);
		/* #endif */
		/* #ifdef H5 */
			height: calc(100vh - 350rpx);
		/* #endif */
		overflow: hidden;
	}

	.left {
		width: 200rpx;
	}

	.scroll-Y {
		height: 100%;
	}

	.left-item {
		margin: 10rpx 10rpx;
		width: auto;
		height: 50rpx;
		text-align: center;
		border: 1px solid #989898;
	}

	.active {
		background-color: red;
	}

	.right {
		margin-left: 20rpx;
		flex: 1;
		overflow: hidden;
	}
	.right_item{
		margin-top: 50rpx;
		width: 100%;
	}
	.right_item .table{
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}
	.right_item .item{
		display: grid;
		grid-template-columns: repeat(3,33.33%);
		overflow: hidden;
		padding: 10rpx 10rpx;
	}
	.right_item .item image{
		width: 100%;
	}
	.right_item .item text{
		display: block;
		font-size: 20rpx;
		text-align: center;
	}
</style>
